<template>
	<div class="Login">
		<div class="login">
			<van-cell-group>
				<van-field v-model="userName" placeholder="请输入账号" class="text" @focus="ipt1" @blur="blur1"
					:class="{bgco:isBgco1}" />
				<van-field v-model="password" placeholder="请输入密码" type="password" class="text" @focus="ipt2" @blur="blur2"
					:class="{bgco:isBgco2}" />
			</van-cell-group>
			<div>
				<van-button square block type="info" class="submit" @click="submit" native-type="submit">登录</van-button>
			</div>
			<div class="other">
				<span @click="register">立即注册</span>
				<!-- <router-link>找回密码</router-link> -->
			</div>
			<div class="copy">
				<p>&copy;猫眼电影 客服电话 ：<span @click="service">400-670-5335</span></p>
			</div>
		</div>
	</div>
</template>



<script>
	//输入框
	import Vue from 'vue';
	import {
		Field,
		CellGroup,
		Toast,
		Button
	} from "vant";

	Vue.use(Button);
	Vue.use(Field);
	Vue.use(CellGroup);
	Vue.use(Toast);

	export default {
		data() {
			return {
				userName: '',
				password: '',
				isBgco1: false,
				isBgco2: false,
			};
		},
		methods: {
			ipt1() {
				this.isBgco1 = true
			},
			blur1() {
				this.isBgco1 = false;
			},
			ipt2() {
				this.isBgco2 = true;
			},
			blur2() {
				this.isBgco2 = false;
			},
			register() {
				this.$router.push('/register')
			},
			submit() {
				//提交数据，发起请求
				let obj = {
					userName: this.userName,
					password: this.password,
				}
				this.$http.post('http://10.36.133.3:3000/api/v1/user/login', obj).then((data) => {
					if (data.err != 0) {
						Toast.fail(data.msg);
					} else {
						//登录成功
						Toast.success(data.msg);
						setTimeout(() => {
							//如果有来源地址
							// if(this.$route.query.goto){
							// 	console.log(this.$router.query.goto)
							// 	// this.$router.push(this.$router.query.goto)
							// }else{
								this.$router.push('/logged')
							// }
						}, 1500)
					}
				})
			},
			service() {
				console.log(this.$store.state.common._token)
			}
		}
	}
</script>

<style scoped>
.login {
     padding: 10px 20px;
}
 .text {
     font-size: 16px;
}
 .bgco {
     background: #eee content-box;
}
 .submit {
     height: 32px;
     color: white;
     background-color: #df2d2d;
     border: none;
     margin-top: 30px;
     border-radius: 5.2px;
}
 .other {
     display: flex;
     justify-content: space-between;
     color: #FE8C00;
     margin-top: 10px;
     font-size: 12px;
}
 .copy {
     text-align: center;
}
 .copy span {
     color: red;
}
 
</style>
